<template>
    <div>
        <div class="container">
            <div class="m-main">
                <div class="m-tip">您当前位置：服务超市>饮食配套</div>
                <div class="m-box">
                    <div class="box-item" v-for="(item,index) in data" :key="index">
                        <div class="item-title">{{item.title}}</div>
                        <div class="item-star">
                            <el-rate
                                v-model="item.star"
                                disabled
                                text-color="#ff9900"
                                score-template="{item.star}">
                            </el-rate>
                        </div>
                        <div class="item-detail">
                            <div class="d-cell">
                                <div class="cell-left">地址</div>:
                                <div class="cell-right text-truncate">{{item.place}}</div>
                            </div>
                            <div class="d-cell">
                                <div class="cell-left">电话</div>:
                                <div class="cell-right text-truncate">{{item.tel}}</div>
                            </div>
                            <div class="d-cell">
                                <div class="cell-left">营业时间</div>:
                                <div class="cell-right text-truncate">{{item.time}}</div>
                            </div>
                        </div>
                        <div class="item-img">
                            <img src="../../../static/images/demo27.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            data:[
                {
                    title:'分趣健身',
                    star:4,
                    place:'厦门市湖里区湖里大道33号',
                    tel:'0592-6668888',
                    time:'周一至周日 09:00~22:00',
                    img:'../../../static/images/demo27.png',
                },
                {
                    title:'分趣健身',
                    star:4,
                    place:'厦门市湖里区湖里大道33号',
                    tel:'0592-6668888',
                    time:'周一至周日 09:00~22:00',
                    img:'../../../static/images/demo27.png',
                },
            ]
        }
    },
    methods:{

    }
}
</script>
<style lang="less" scoped>
.container{
    background: #F3F3F3;
    font-family:MicrosoftYaHei;
    font-weight:400;
    background: #F3F3F3;
    .m-main{
        padding: 80px 20px 100px;
        .m-tip{
            color: #999999;
            font-size: 12px;
        }
        .m-box{
            margin-top: 40px;
            .box-item{
                padding: 30px 25px;
                background: #fff;
                position: relative;
                margin-top: 30px;
                .item-title{
                    font-size: 20px;
                    font-weight: bold;
                }
                .item-star{
                    margin: 20px 0;
                }
                .item-detail{
                    width: 333px;
                    border-top: 1px solid #E0E0E0;
                    padding: 5px 0;
                    font-size: 16px;
                    color: #666;
                    .d-cell{
                        height: 40px;
                        line-height: 40px;
                        .cell-left,.cell-right{
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .cell-left{
                            width: 20%;
                            text-align: justify;
                            text-align-last:justify
                        }
                    }
                }
                .item-img{
                    position: absolute;
                    top: 50px;
                    right: 55px;
                    width: 334px;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>
